<template>
  <div class="author-page">
    <layout>
      <background class="bg"></background>
      <transition name="fade">
        <article v-if="loaded">
          <div class="main">
            <top :msg="topData"></top>
            <middle :msg="middleData"></middle>
            <bottom :msg="bottomData"></bottom>
            <bottom-directions :msg="bottomDirectionsData"></bottom-directions>
            <bottom-bottom :msg="bottomBottomData"></bottom-bottom>
            <relation :msg="relationData"></relation>
          </div>
        </article>
        <loading v-else class="page-loading"></loading>
      </transition>
    </layout>
  </div>
</template>

<script>
import request from "@/requests";

import Background from '@/components/Background/AuthorBg.vue';

import Loading from '@/components/Loading/index';

import Layout from '@/layout/index';

import Top from './top';
import Middle from './middle';
import Bottom from './bottom';
import BottomDirections from './bottomDirections';
import BottomBottom from './bottomBottom';
import Relation from './relation';

export default {
  name: "Author",
  props: {

  },
  data() {
    return {
      indexData: Object,
      loaded: false
    };
  },
  computed: {
    topData() {
      const data = this.indexData;
      return {
        name: data.name,
        avatar: data.avatar,
        affiliation: data.affiliation,
        affiliationHistory: data.affiliationHistory,
        direction: data.direction,
        mostCoAuthor: data.mostFrequentCoAuthor,
        mostCitedArticle: data.mostCitedArticle,
        preDirection: data.directionPredicted
      }
    },
    middleData() {
      const data = this.indexData;
      return {
        affiliationAmount: data.affiliationHistory.length,
        directionAmount: data.directionHistory.length,
        coAuthorAmount: data.coAuthors.length,
        citedAmount: data.citedNum,
        referenceAmount: data.referenceNum,
        influence: data.influence,
        influenceLevel: data.influenceLevel,
        startYear: data.publicationYear[0],
        endYear: data.publicationYear[data.publicationYear.length - 1],
        articleAmount: data.authorArticle.length
      }
    },
    bottomData() {
      const data = this.indexData;
      return {
        articleByYear: data.articleYear,
        directions: data.directionHistory,
        coAuthors: data.coAuthors
      }
    },
    bottomDirectionsData() {
      const data = this.indexData;
      return {
        directionsByYear: data.directionYear
      }
    },
    bottomBottomData() {
      const data = this.indexData;
      return {
        authorArticles: data.authorArticle
      }
    },
    relationData() {
      const data = this.indexData;
      return {
        name: data.name     
      }
    }
  },
  created() {

  },
  mounted() {
    this.load();
  },
  watch: {
    '$route' (to, from) {
      if(to.params.id !== from.params.id){
        this.load();
      }  
    }
  },
  methods: {
    init() {
      this.indexData = new Object();
      this.loaded = false;
    },
    load() {
      this.init();
      const id = this.$route.params.id;
      request({
        method: 'get',
        url: `/author/${id}`,
      }).then((res) => {
        this.indexData = res.data.data;
        this.loaded = true;
        document.title = this.$route.meta.title + ' | ' + this.indexData.name;
      }).catch((err) => {
        console.log(err);
      });
    }
  },
  components: {
    Layout,
    Background,
    Loading,
    Top,
    Middle,
    Bottom,
    BottomDirections,
    BottomBottom,
    Relation
  },
};
</script>

<style scoped lang="scss">
.author-page {
  .bg {
    position: fixed;
    z-index: -1;
  }

  article {
    display: flex;
    width: 1280px;
    margin: 40px auto;
    transition: ease-in-out .25s;

    @media screen and (max-width: 1280px){
      width: 995px;
    }

    @media screen and (max-width: 1024px){
      margin: 20px 10px;
      width: auto;
    }

    >.main {
      flex: 1;
      >* {
        margin-bottom: 10px;
      }
    }
  }

  .page-loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
